@import './../../assets/stylesheets/fonts.scss';
@import './../../assets/stylesheets/colors.scss';

.testCardlight {
  display: flex;
  background-color: $mint;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  --card-content-bg: white;
  --card-title-color: #{$salmon};
  --card-desc-color: black;
  --line-color: #{$mint};

  &:hover{
    transform: scale(1.01, 1.02);
    transition: all 0.5s ease-out;
  }
}

.testCarddark {
  display: flex;
  background-color: $darkslategrey;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  --card-content-bg: #{$chromegray};
  --card-title-color: #{$mint};
  --card-desc-color: #{$eggshell};
  --line-color: #{$salmon};
  &:hover{
    transform: scale(1.01, 1.02);
    transition: all 0.5s ease-out;
  }
}

.iconLeft {
  padding: 10px;
  flex: 1 1 30%;
  display: flex;
  justify-content: center;
  align-items: center;

  svg {
    height: 65%;
    width: 65%;
    color: white;
    max-width: 80px;
    max-height: 80px;
  }
}

.contentCard {
  display: flex;
  flex: 1 1 70%;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background-color: var(--card-content-bg);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.cardTitle {
  color: var(--card-title-color);
  flex: 1 1 30%;
  display: flex;
  font-size: 1.25rem;
  font-weight: bold;
  justify-content: center;
  align-items: flex-end;
  border-bottom: 2px solid $mint;
  width: 100%;
}

